/**
 * Shopware 4.0
 * Copyright © 2012 shopware AG
 *
 * According to our dual licensing model, this program can be used either
 * under the terms of the GNU Affero General Public License, version 3,
 * or under a proprietary license.
 *
 * The texts of the GNU Affero General Public License with an additional
 * permission and of our proprietary license can be found at and
 * in the LICENSE file you have received along with this program.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU Affero General Public License for more details.
 *
 * "Shopware" is a registered trademark of shopware AG.
 * The licensing of the program under the AGPLv3 does not imply a
 * trademark license. Therefore any rights, title and interest in
 * our trademarks remain entirely with us.
 *
 * @category   Shopware
 * @package    Shopware_Styling
 * @subpackage Article
 * @copyright  Copyright (c) 2012, shopware AG (http://www.shopware.de)
 * @version    $Id$
 * @author shopware AG
 */
@mixin shopware-article {

    .#{$prefix}article-properties-box-selection .#{$prefix}boxselect-item {
        margin: 3px 2px !important;
    }

    .#{$prefix}article-detail-window {
    
    	table[id^=mediafield] .#{$prefix}form-trigger-wrap {
    		display: block;
    	}

    	// Hide the translation globes here
    	.#{$prefix}translation-globe {
    		display: none !important; 
    	}
    	
    	// Increase the grid row height of the price grid
    	div[id^=article-price-grid].#{$prefix}grid-with-row-lines .#{$prefix}grid-cell-inner {
    		font-size: 12px;
			line-height: 16px;
			padding-bottom: 4px;
    	}

        //Individually styling for the form fields
        .#{$prefix}form-cb-label, .#{$prefix}form-item-label {
            font-size: 11px !important;
        }

        //Styling for the detail page accordion
        .#{$prefix}article-sidebar-accessory, .#{$prefix}article-sidebar-similar {
            .#{$prefix}search-article-live-field {
                width: 100% !important;
                .#{$prefix}form-item-body {
                    width: 100%;
                }

                .#{$prefix}form-trigger-wrap {
                    position: relative !important;
                    right: 0 !important;
                    top: 0 !important;
                    width: 100% !important;
                }
            }
        }

        //Fix for the tiny mce component
        .#{$prefix}article-description-long .mceEditor {
            display: block;
            .mceLayout {
                width: 100% !important;
                iframe {
                    width: 100% !important;
                }
            }
        }
        .#{$prefix}article-image-info {
            .#{$prefix}media-info-form-panel {

            }
        }


        //Styling for the article image tab
        .#{$prefix}article-image-list {
            .#{$prefix}toolbar-shopware-ui-docked-top {
                border-left: 1px solid $border-color !important;
                border-right: 1px solid $border-color !important;
            }

            //global styling for all thumbnail wrapper in the image list
            .article-thumb-wrap {
                position: relative;
                float: left !important;
                border: 1px solid #c7c7c7 !important;
                margin: 15px !important;
                padding: 8px;
                text-align: center;
                @include single-box-shadow(rgba(0, 0, 0, .35), 0, 0, 5px);
                .thumb {
                    position: relative;
                    width: 100%;
                    height: 100%;
                }
                .inner-thumb {
                    width: 100%;
                    height: 100%;
                }
                img {
                    display: block;
                    margin: 0 auto;
                    max-height: 100%;
                    max-width: 100%;
                }

            }

            //styling for the selected article image
            .article-thumb-wrap.x-item-selected {
                @include single-box-shadow(rgba(24, 158, 255, 1), 0, 0, 5px);
                border-color: #189eff;
            }


            //individuall styling for the different image sizes
            .article-thumb-wrap.small {
                font-size: 11px;
                width: 90px;
                height: 70px;
            }
            .article-thumb-wrap.middle {
                font-size: 12px;
                width: 175px;
                height: 150px;
            }
            .article-thumb-wrap.big {
                font-size: 13px;
                width: 250px;
                height: 200px;
            }

            //styling for the drag over element
            .article-thumb-wrap.drag-over:before{
                position: absolute;
                left: -20px;
                width: 8px;
                top: -8px;
                content: '';
                background-image: url(""), url(""), url("");
                background-repeat: no-repeat, no-repeat, repeat-y;
                background-position: left bottom, left top, 3px top;
            }

            .article-thumb-wrap.drag-over.small:before {
  		        height: 84px;
            }
            .article-thumb-wrap.drag-over.middle:before {
                height: 166px
            }
            .article-thumb-wrap.drag-over.big:before{
                height: 214px;
            }
	        //styling for the main image
            .article-thumb-wrap.main {
                @include single-box-shadow(rgba(22, 132, 231, 1), 0, 0, 5px);
                border-color: #1684E7 !important;
            }

            .article-thumb-wrap .thumb .mapping-config {
                background: url("") no-repeat;
                width: 16px;
                height: 16px;
                position: absolute;
                right: -4px;
                top: -4px;
                cursor: pointer;
            }

            .article-thumb-wrap .preview {
                background: url("") no-repeat;
                display: block;
                width: 70px;
                height: 70px;
                position: absolute;
                top: -11px;
                left: -11px;

                span {
                    @include rotate(-47deg);
                    position: relative;
                    left: -7px;
                    top: 19px;
                    display: block;
                    color: #fff;
                    font-size: 11px;
                    font-weight: bold;
                    text-shadow: 0 1px 0 #0745ef;
                }
            }
        }

        .#{$prefix}article-image-info .outer-article-info-thumbnail {
            border: 1px solid #c7c7c7 !important;
            padding: 13px 0;
            text-align: center;
            @include single-box-shadow(rgba(0, 0, 0, .35), 0, 0, 5px);
        }

        .#{$prefix}article-image-info .article-thumb-wrap,
        .#{$prefix}article-image-info .article-thumb-wrap .thumb,
        .#{$prefix}article-image-info .article-thumb-wrap .inner-thumb,
        .#{$prefix}article-image-info .article-thumb-wrap .inner-thumb img {
            max-width: 100% !important;
            max-height: 100% !important;
            display: block !important;
        }
        .#{$prefix}article-image-info .article-thumb-wrap .inner-thumb img {
            margin: 0 auto !important;
        }

        .#{$prefix}article-image-assignments-tree .#{$prefix}grid-body {
            border-left: 1px solid $border-color !important;
        }

        .#{$prefix}article-properties-grid .#{$prefix}grid-cell-inner {
            line-height: 21px;
        }
    }
    .#{$prefix}article-sidebar {
        .#{$prefix}panel-header-horizontal {
            cursor: pointer;
        }
    }
    div[id^=article-category-tree] .#{$prefix}grid-view, div[id^=article-category-drop-zone] .#{$prefix}panel-body {
        background: #fff;
    }
    div[id^=article-category-tree] {
        .#{$prefix}grid-header-ct {
            border-left: 1px solid #a4b5c0;
        }
        .#{$prefix}grid-body {
            border-left: 1px solid #a4b5c0;
        }
    }
    div[id^=article-category-list] {
        border-bottom: 0 none;
    }

    .#{$prefix}image-tab-container {
        background: #ebedef;
        div[id^=article-image-upload] .#{$prefix}panel-body {
            background: #fff;
        }
        .#{$prefix}article-image-list {
            .#{$prefix}toolbar {
                border-color: #a4b5c0;
            }
        }
    }

    .#{$prefix}article-image-info {
        .#{$prefix}panel-body {
            background: #fff;
        }
        .#{$prefix}toolbar {
            @include reset-box-shadow;
            border-left: 0 none;
            border-right: 0 none;
            background: #fff;
        }
    }
}
